<template>
  <scroll-view class="main" @scrolltolower="loadMore" scroll-y :style="{ height: dynamicMainWindowHeight + 'px' }">
    <SearchBarCom/>
    <view class="category uni-mb-10">
      <view class="home-category-item" @tap="clickCategory(item)" v-for="(item, index) in state.categoryList"
            :key="index">
        <image style="width: 80px; height: 80px;" mode="scaleToFill" :src="item.thumbCover"></image>
        <text class="name">{{ item.name }}</text>
      </view>
    </view>
    <uni-card :is-shadow="true" :is-full="true" title="猜你喜欢" :thumbnail="state.recommendIcon" padding="5px">
      <productListCom :product-list="state.productList"/>
    </uni-card>
    <uni-load-more :status="state.load.status"></uni-load-more>
  </scroll-view>
</template>

<script setup lang="ts">
import SearchBarCom from '@/pages/index/components/search.vue'
import ProductListCom from '@/components/product/list.vue'
import {computed, ref} from 'vue'
import type {CategoryBriefType} from "@/types/product";
import {onLoad} from "@dcloudio/uni-app";
import {getCategoryData, getRecommendCommonData, getRecommendData} from "@/services/home";
import type {ISort, PageQueryType} from "@/types/global";
import type {ProductItemCls} from "@/types/productcls";
import {useUserStore} from "@/stores/user";
// 获取屏幕边界到安全区域距离
const {windowHeight} = uni.getWindowInfo()
const {hostName} = uni.getSystemInfoSync()
const userStore = useUserStore()
const state = ref({
  categoryList: [] as Array<CategoryBriefType>,
  productList: [] as Array<ProductItemCls>,
  recommendIcon: "",
  load: {
    status: "loading",
    finish: false
  },
  query: {
    label: "",
    page: {
      page: 1,
      size: 10,
      orders: [] as Array<ISort>
    } as PageQueryType
  }
})

const getCategoryListData =async () => {
  await getCategoryData().then((r) => {
    state.value.categoryList = r.data
  })
}

const clickCategory = (categoryItem: CategoryBriefType) => {
  uni.navigateTo({
    url: "/pages/search/list?category=" + categoryItem.id
  })
}

const loadMore = () => {
  if (state.value.load.finish) {
    return
  }
  state.value.query.page.page = state.value.query.page.page + 1
  getProductListData()
}

const getProductListData =async () => {
  // 设置加载组件状态
  state.value.load.status = "loading"
  if (userStore.isLogin()) {
    await getRecommendData(state.value.query).then((r) => {
      if (r.code === 0) {
        state.value.productList.push(...r.data.list)
        // 判断是否还有下一页
        if (r.data.pages <= state.value.query.page.page) {
          state.value.load.finish = true
          state.value.load.status = "no-more"
        } else {
          state.value.load.status = "more"
        }

      } else {
        uni.showToast({
          title: r.msg,
          icon: "none"
        })
        state.value.load.status = "no-more"
      }
    }).catch((e) => {
      state.value.load.status = "no-more"
    })
  } else {
    await getRecommendCommonData(state.value.query).then((r) => {
      console.log("recommend common data: ", r)
      if (r.code === 0) {
        state.value.productList.push(...r.data.list)
        // 判断是否还有下一页
        if (r.data.pages >= state.value.query.page.page) {
          state.value.load.finish = true
          state.value.load.status = "no-more"
        } else {
          state.value.load.status = "more"
        }
      } else {
        uni.showToast({
          title: r.msg,
          icon: "none"
        })
        state.value.load.status = "no-more"
      }
    }).catch((e) => {
      state.value.load.status = "no-more"
    })
  }
}

const dynamicMainWindowHeight = computed(() => {
  console.log("@available height ", windowHeight, hostName)
  if (hostName === 'WeChat') {
    return windowHeight
  }
  return windowHeight - 50 -44
})

onLoad(() => {
  Promise.all([
    getCategoryListData(),
    getProductListData()
  ])
  console.log(state.value.productList)
})
</script>

<style lang="scss">
.main {
  .category {
    background-color: $uni-bg-color;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .home-category-item {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .name {
        font-size: 15px;
        color: $uni-secondary-color;
      }
    }
  }

}
</style>
